Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Layout Designer 2 by PVII - Layer

Layout Designer is intended for building layouts with absolutely positioned elements that must work in legacy browsers, such as Netscape 4, IE4, Netscape 6, and Netscape 7. If you do not need to support these outdated browsers, you should not use Layout Designer. Instead, you should design your layout using modern CSS techniques. See the CSS Lab selection of PVII Tutorials for ideas.

The interface is designed to allow you to easily combine many alignment events in a single behavior session. You can add or delete as many events as you like, you can even change the order of the alignment events. Simply select an alignment method and Layout Designer will automatically place the layer(s) in the correct position on the page- relative to another layer. The Layout Designer automatically realigns your layers when the browser window is resized, so there's no need to apply separate resize events... and the Netscape Resize Fix should not be used.

Download the Layout Designer 2 by PVII extension

Note: Opera 5x+ does not support the onresize event, so the built-in resize handling will not work. Use our Opera Resize Fix extension to handle this.

PVII Layout Designer2 is an extension suite and contains two behaviors:

  1. PVII Layout Designer2 - Layer (aligns layers to other layers)
  2. PVII Layout Designer2 - Screen (aligns layers relative to the browser window's dimensions)

Overview

Automatically position one or more layers relative to other layers. The unique ability to align to the rendered bottom edge of a layer allows you to "stack" layers vertically. Layers can be aligned to layers that were previously "screen" aligned (by the Layout Designer-Screen behavior) to build extremely complex designs not otherwise possible. You can add as many alignment Events as you like and you can even align a layer more than once for complete control over vertical and horizontal placement.

The Layout Designer behaviors are designed to be applied to the <body> tag's onLoad event. This allows the script to set up the positioning when the page first loads so that all of the layers are in their intended locations. You can also apply the Layout Designer to other event triggers on your page to allow for user interaction. For example, an entire page layout can be changed with a single Layout Designer event.

Note: To access the <body> tag to apply this behavior, click the <body> tag at the bottom left of the Dreamweaver window (the status bar), then open the Behavior panel and confirm that it reads: Behaviors - <body> Actions.

Creating a PVII Layout Designer 2 - Layer behavior

  1. Select (click) an element that will act as the trigger for the behavior, in most cases the <body> tag.
  2. Click the plus button (+) on the Behaviors Panel.
  3. Choose Studio VII - CSS - PVII Layout Designer- Layer to open the interface.
  4. Select the Id of the layer you wish to align from the Align this Layer list
  5. Select the layer you wish to align to from the To Target Layer list
  6. Select an Align Method (the Target Layer is always represented by the button labeled"T" in the methods pictograph).
  7. Enter your desired options.

Note: If you want to add more alignment events, Click the Add button and repeat the above steps. If you want to Delete an alignment event, Click the line you wish to delete and then Click the Delete Item button.

You can change the order of the events by using the Up or Down buttons.

Click OK to apply the behavior.

Modifying an existing PVII Layout Designer 2 - Layer behavior

  1. Select the element that contains an existing PVII Layout Designer2 behavior.
  2. Open the Behaviors panel and Double-click the Layout Designer2 event
  3. Select an Alignment Event then edit its attribute as necessary.
  4. Optionally add, delete or change the order as desired.
  5. Click OK to apply the revised behavior.

The Interface:

The PVII Layout Designer 2 - Layer interface allows you to easily set or modify, add or delete any of the Alignment Events at any time.

User Interface

Alignment Events

This listing shows all defined alignment events. Each alignment event shows the layer name (id) that you are aligning, followed by the layer name (id) of the target layer to which you are aligning it, the Align Method, and the Offset Amount. This allows you to easily review all of your defined alignment events. You can add as many alignment events as you like, and you can delete existing events. You can also change the order of the events by using the Up and Down buttons. To edit an event, simply select its line and then choose the Layer to Align, Target Layer, Align Method, and Offset Amounts.

In the illustrated example above, choosing the "D" button aligns "Layer4" to the left edge of "Layer1" with a 10px space between them.

Align This Layer

Select the layer you wish to position. All of the absolutely positioned layers (div) on your page that contain an id (<p id="abc">) will be listed here. By default, the first layer in this list is always selected when you create a new line (alignment event). Select the desired layer from this listing. The Alignment Events box will immediately update to reflect the selected layer.

To Target Layer

Select the layer that you want to use as the alignment target. The current position and/or dimensions of this layer will be used as the reference for the selected alignment method. This is referred to as the "Target Layer" and corresponds to the "T" in the center of the Alignment Method pictograph. Upon selecting your Target Layer, the Alignment Events box will update to reflect your selection.

Note: Selecting a layer to align to itself (with an offset amount) will have the effect of moving that layer relative to itself based on the chosen alignment method.

Align Method

You can align a layer relative to the left, right, top, bottom, or diagonal edge(s) of the target layer ± the Offset Amounts you desire. The buttons A through H represent the alignment of the selected layer to the Target Layer, which is represented by the "T" button in the middle. Clicking one of the alignment buttons will cause it to appear "depressed"… matching the T button, which is always depressed. You can add more than one alignment event for a particular layer by clicking the Add button to add a new alignment event… then select the same layer as before from the Align this Layer list.

For each alignment method you can also enter a vertical and horizontal offset amount. This will control the amount of space between the aligned layer and the target layer based on the selected alignment method.

Note: Remember that the alignment will be based on the layer's actual rendered with and height.

Select one of the predefined alignment methods by clicking one of the buttons (A-H):

Method A

The Layer will be positioned so that its bottom right corner meets the Target Layer's top left corner (± the Offset amounts). A negative Vertical Offset will create space between the Layer's bottom edge and the Target Layer's top edge. A negative Horizontal Offset will create space between the Layer's right edge and the Target Layer's left edge.

Method B

The Layer will be positioned so that its bottom edge meets the Target Layer's top edge with both left edges aligned vertically (± the Offset amounts). A negative Vertical Offset will create space between the Layer's bottom edge and the Target Layer's top edge. A positive Horizontal Offset will position the Layer's left edge to the right of the Target Layer's left edge.

Method C

The Layer will be positioned so that its bottom left corner meets the Target Layer's top right corner (± the Offset amounts). A negative Vertical Offset will create space between the Layer's bottom edge and the Target Layer's top edge. A positive Horizontal Offset will create space between the Layer's left edge and the Target Layer's right edge.

Method D

The Layer will be positioned so that its right edge meets the Target Layer's left edge… while both layer's top edges align horizontally (± the Offset amounts). A positive Vertical Offset will position the Layer's top edge lower than the Target Layer's top edge. A positive Horizontal Offset will create space between the Layer's right edge and the Target Layer's left edge.

Method E

The Layer will be positioned so that its left edge meets the Target Layer's right edge… while both top edges align horizontally (± the Offset amounts). A positive Vertical Offset will position the Layer's top edge lower than the Target Layer's top edge. A positive Horizontal Offset will create space between the Layer's left edge and the Target Layer's right edge.

Method F

The Layer will be positioned so that its top right corner meets the Target Layer's bottom left corner (± the Offset amounts). A positive Vertical Offset will create space between the Layer's top and the Target Layer's bottom edge. A negative Horizontal Offset will position the Layer's right edge to the left of the Target Layer's left edge.

Method G

The Layer will be positioned so that its top edge meets the Target Layer's bottom edge, while both layer's left edges align vertically (± the Offset amounts). A positive Vertical Offset will create space between the Layer's top edge and the Target Layer's bottom edge. A positive Horizontal Offset will position the Layer's left edge to the right of the Target Layer's left edge.

Method H

The Layer will be positioned so that its top left corner meets the Target Layer's bottom right corner (± the Offset amounts). A positive Vertical Offset will create space between the Layer's left edge and the Target Layer's right edge. A positive Horizontal Offset will position the Layer's left edge to the right of the Target Layer's right edge.

Offsets (px)

The Offset values are used to control the distances (or margins) between the Layer and the Target Layer. You can specify positive or negative amounts. A zero entry (the default) will perfectly align one layer's edge to another.

Vertical

This determines the vertical distance between the Layer and the Target Layer and works in conjunction with the Align Method. For Methods A,B, and C this is the distance between the Layer's bottom edge and the Target Layer's top edge. For Methods D and E this is the distance between the Layer's top edge and the Target Layer's top edge. For Methods F,G, and H this is the distance between the Layer's top edge and the Target Layer's bottom edge.

Horizontal

This determines the horizontal distance between the Layer and the Target Layer (in conjunction with the Align Method). For Methods A,D, and F this is the distance between the Layer's right edge and the Target Layer's left edge. For Methods B and G this is the distance between the Layer's left edge and the Target Layer's left edge. For Methods C,E, and H this is the distance between the Layer's left edge and the Target Layer's right edge.

Add Button

Click this button to add a new line, ready to receive another alignment event. You can add as many alignment events as you like. Whenever you create a new line, the default selections will be supplied automatically. Be sure to make your specific selections and option settings for each new line.

Delete Button

Select the line you wish to delete in the "Alignment Events" box and click the Delete button. The alignment event that was defined will be removed from the listing. You can delete as many lines as you like, although the behavior will insist on keeping at least one line. If you try to delete the only line, the behavior will restore this line to the preset defaults.

Up Button

Select the Alignment Event (line) you wish to move. Click the up button to move the selected event (line) upward in the list. Each click will move the event up one line.

Down Button

Select the Alignment Event (line) you wish to move. Click the Down button to move the selected event (line) downward in the list. Each click will move the event down one line.

Layout Designer 2: Layer | Screen | back to main listing